<template>
  <div class="myinfo">
    <van-image
      hight="191"
      src="http://liufusong.top:8080/img/profile/bg.png"
      fit="fill"
    />

    <div class="info_b_box">
      <div class="my_icon">
        <img
          class="pic"
          :src="'http://liufusong.top:8080' + userInfo.avatar"
          alt=""
        />
      </div>
      <div class="info_s_box" v-if="token">
        <p class="name">{{ userInfo.nickname }}</p>
        <van-button class="btn_login" type="primary" @click="logout"
          >退出</van-button
        >
        <!-- <p class="text">编辑个人资料<van-icon name="play" /></p> -->
      </div>

      <div class="info_s_box" v-else>
        <p class="name">游客</p>
        <van-button
          class="btn_login"
          type="primary"
          @click="$router.push('/login')"
          >去登陆</van-button
        >
      </div>
    </div>

    <van-grid clickable :column-num="3" :border="false">
      <van-grid-item icon="star-o" text="我的收藏" to="/collect" />
      <van-grid-item icon="wap-home-o" text="我的出租" to="/rentlist" />
      <van-grid-item icon="clock-o" text="看房记录" to="/myhistory" />
    </van-grid>
    <van-grid clickable :column-num="3" :border="false">
      <van-grid-item icon="idcard" text="成为房主" to="/" />
      <van-grid-item icon="user-o" text="个人资料" to="/" />
      <van-grid-item icon="service-o" text="联系我们" to="/" />
    </van-grid>

    <van-image
      width="92%"
      height="100"
      src="http://liufusong.top:8080/img/profile/join.png"
      class="img_bottom"
    />
  </div>
</template>

<script>
import { userInfo } from '@/api/user'
import { getToken, removeToken } from '@/utils/storage'
export default {
  name: 'MyInfo',
  data () {
    return {
      userInfo: {},
      token: null
    }
  },

  async created () {
    const data = await userInfo()
    this.token = getToken()
    console.log(data)
    this.userInfo = data.body
  },

  methods: {
    logout () {
      removeToken()
    }
  }
}
</script>

<style scoped lang="less">
.info_b_box {
  position: relative;
  margin-top: 25px;
  margin-bottom: 10px;

  .my_icon {
    top: -85px;
    left: 146px;
    z-index: 999;
    position: relative;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 5px solid #f5f5f5;
    display: inline-block;
    box-shadow: 0 2px 2px #bdbdbd;
    .pic {
      width: 100%;
      border-radius: 50%;
    }
  }
  .info_s_box {
    position: absolute;
    width: 278px;
    height: 165px;
    background: #fff;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px 3px #ddd;
    margin: 50px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: 13px;

    .name {
      position: absolute;
      top: 35px;
      left: 116px;
    }
    .btn_login {
      position: absolute;
      top: 80px;
      left: 120px;
      .text {
        position: absolute;
        top: 80px;
        left: 120px;
        color: #ccc;
        font-size: 12px;
      }
    }
  }
}

.img_bottom {
  margin-top: 10px;
  margin-left: 15px;
}
</style>
